<template>
	<view class="h-fill">
		<view v-if="list.length">
			<view @click="navToDetail(index)" v-for="(item, index) in list" :key="item.id"
				class="order-item round-corner" style="padding: 30rpx;">
				<view class="uni-flex align-center">
					<image class="icon-time" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_shijian.png" mode="widthFix"></image>
					<text class="uni-flex-extend text-sm"
						style="color: #333333;">下单时间：{{item.create_time || '-'}}</text>
					<text v-if="item.type == 'goods'"
						:style="{color: goodsOrderStatus[item.status + ''].color}">{{ goodsOrderStatus[item.status + ""].label }}</text>
					<text v-else
						:style="{color: item.renewalNoPay ? '#FF5673' : subscribeOrderStatus[item.status + ''].color}">{{ subscribeOrderStatus[item.status + ""].label }}</text>
				</view>
				<view class="t-pad b-pad">
					<view v-if="item.type == 'goods'" class="uni-flex">
						<view v-if="item.items && item.items.length && item.items[0].goods_thumb" class="goods-img">
							<u-lazy-load :borderRadius="20" loading-img="/static/easy-loadimage/loading.gif"
								error-img="/static/img/img_home_quesheng@2x.png" :image="item.items[0].goods_thumb"
								:height="130" img-mode="aspectFill"></u-lazy-load>
						</view>
						<view v-else class="goods-img">
							<image class="h-fill v-fill" :src="$getCloudStorageUrl('/img_home_quesheng_no_bg@2x.png')"
								mode="aspectFit"></image>
						</view>
						<view class="uni-flex-extend">
							<text class="uni-bold goods-info-name" style="margin-bottom: 18rpx;">{{item.items[0].goods_name}}</text>
							<view class="order-sku">{{item.items[0].sku_name}}</view>
						</view>
					</view>
					<view v-else-if="item.type == 'subscribe'">
						<view class="uni-flex">
							<view class="order-img">
								<view class="leftImg">
									<u-lazy-load
										image="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ming_juben_da@2x.png"
										:height="140" img-mode="aspectFill" :border-radius='[20, 0, 0, 20]'>
									</u-lazy-load>
									<view class="hint">{{ item.scriptInfo ? item.scriptInfo.name : '' }}</view>
								</view>
								<view class="rightImg">
									<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
										error-img="/static/img/img_home_quesheng@2x.png" :image="item.scriptInfo.cover"
										:height="140" img-mode="aspectFill" :border-radius='[0, 20, 20, 0]'>
									</u-lazy-load>
								</view>
							</view>
							<view class="flex-extend order-text">
								<template v-if="item.motorcadeId && item.motorcadeInfo">
									<view class="h-box justify-between">
										<text class="text-title">{{ item.motorcadeInfo.name || '-' }}</text>
									</view>
									<view class="uni-text-gray uni-ellipsis" v-if="item.roomInfo.roomId">
										{{ item.items[0].store_name }} | {{item.roomInfo.roomName}}</view>
									<view class="uni-text-gray uni-ellipsis" v-else>{{ item.roomInfo.storeName }}
									</view>
									<view class="uni-text-gray">
										{{ formatTimeIntervalStr(item.motorcadeInfo.startTime, item.motorcadeInfo.endTime) }}
									</view>
								</template>
								<template v-else>
									<view class="h-box justify-between">
										<text class="text-title">{{ item.scriptInfo.name || '-' }}</text>
									</view>
									<view class="uni-text-gray uni-ellipsis" v-if="item.roomInfo.roomId">
										{{ item.items[0].store_name }} | {{item.roomInfo.roomName}}</view>
									<view class="uni-text-gray uni-ellipsis" v-else>{{ item.roomInfo.storeName }}</view>
									<view class="uni-text-gray">
										{{ formatTimeIntervalStr(item.items[0].start_time, item.items[0].end_time) }}
									</view>
								</template>
							</view>
						</view>
						<view class="order-num">
							<view class="uni-text-gray uni-text-small">订单编号：{{ item._id }}</view>
							<view class="order-num-copy" @click.stop="handleCopy('subscribe', index)">复制</view>
							<!-- <u-button shape="circle" size="mini" :custom-style="buttonCopy" @click.stop="handleCopy('subscribe', index)">复制</u-button> -->
						</view>
						<template v-if="item.motorcadeId">
							<view class="order-avatar" v-if="item.members && item.members.length">
								<view class="uni-flex">
									<view class="order-avatar-member">
										<view class="order-avatar-member-item"
											v-if="item.members[0] && item.members[0].avatar">
											<u-avatar :src="item.members[0].avatar" :size="50" class='avatar'>
											</u-avatar>
										</view>
										<view class="order-avatar-member-item"
											v-if="item.members[1] && item.members[1].avatar">
											<u-avatar :src="item.members[1].avatar" :size="50" class='avatar'>
											</u-avatar>
										</view>
										<view class="order-avatar-member-item" v-if="item.members.length > 2">
											<u-avatar :text="membersLength(item)" bg-color="#d4d4d4" :size="50"
												class='avatar'></u-avatar>
										</view>
									</view>
									<view class="l-mg uni-text-gray" v-if="item.status === 1 || item.status === 2">
										还差<text
											class="pink">{{ item.motorcadeInfo.minPlayers - item.motorcadeInfo.currentMaleCount - item.motorcadeInfo.currentFemaleCount || 0 }}</text>人发车
									</view>
								</view>
								<view class="order-avatar-paid uni-text-gray">实付{{ item.items[0].count || 0 }}人
									共：￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}</view>
							</view>
							<view class="t-pad"
								v-if="item.motorcadeInfo && item.motorcadeInfo.renewalOrders_inverted && item.motorcadeInfo.renewalOrders_inverted.length">
								<view v-for="(i, idx) in item.motorcadeInfo.renewalOrders_inverted" :key="idx"
									class="uni-flex justify-between text-small">
									<view class="purple">续时
										{{ formatTimeInterval(i.renewalEndTime - i.renewalDuration, i.renewalEndTime )}}
									</view>
									<!-- <view class="pink">¥{{ renewalNeedPay(item.items[0], item.scriptInfo.playTime, i.renewalDuration) || 0 }}</view> -->
									<view class="pink">¥{{ i.money / 100 || 0 }}</view>
								</view>
							</view>
						</template>
					</view>
					<view v-else-if="item.type === 'tearoom'">
						<view class="uni-flex">
							<view class="order-img">
								<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
									error-img="/static/img/img_home_quesheng@2x.png" :image="item.roomInfo.photos"
									:height="140" img-mode="aspectFill" :border-radius='20'></u-lazy-load>
							</view>
							<view class="flex-extend order-text">
								<view class="h-box justify-between">
									<text class="text-title">茶室</text>
								</view>
								<view class="uni-text-gray uni-ellipsis">{{ item.items[0].store_name }} |
									{{item.items[0].room_name}}</view>
								<view class="uni-text-gray">
									{{ formatTimeIntervalStr(item.items[0].start_time, item.items[0].end_time) }}</view>
							</view>
						</view>
						<view class="order-num">
							<view class="uni-text-gray uni-text-small">订单编号：{{ item._id }}</view>
							<!-- <u-button shape="circle" size="mini" :custom-style="buttonCopy" @click.stop="handleCopy('subscribe', index)">复制</u-button> -->
							<view class="order-num-copy" @click.stop="handleCopy('subscribe', index)">复制</view>
						</view>
						<view class="order-avatar">
							<view class="uni-flex"></view>
							<view class="order-avatar-paid uni-text-gray">
								共：￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}</view>
						</view>
						<view class="t-pad"
							v-if="item && item.renewalOrders_inverted && item.renewalOrders_inverted.length">
							<view v-for="(i, idx) in item.renewalOrders_inverted" :key="idx"
								class="uni-flex justify-between text-small">
								<view class="purple">续时
									{{ formatTimeInterval(i.renewalEndTime - i.renewalDuration, i.renewalEndTime )}}
								</view>
								<!-- <view class="pink">¥{{ renewalNeedPay(item.items[0], 1, i.renewalDuration) || 0 }}</view> -->
								<view class="pink">¥{{ i.money / 100 || 0 }}</view>
							</view>
						</view>
					</view>
					<view v-else class="uni-flex">
						<view class="goods-img">
							<u-lazy-load :borderRadius="20" :image="item.scriptInfo ? item.scriptInfo.cover : ''"
								:height="130" img-mode="aspectFill"></u-lazy-load>
						</view>
						<view class="uni-flex-extend">
							<text class="uni-bold goods-info-name"
								style="margin-bottom: 18rpx;">{{item.scriptInfo ? item.scriptInfo.name : ''}}</text>
						</view>
					</view>
				</view>
				<view v-if="item.status > 2 && item.status < 6 &&  orderType !== 'subscribe'"
					class="uni-flex align-center">
					<text
						class="uni-flex-extend uni-text-gray uni-text-small uni-ellipsis">订单编号：{{item._id.toUpperCase()}}</text>
					<!-- #ifndef H5 -->
					<u-button @click="handleCopy(item)" shape="circle" size="mini">复制</u-button>
					<!-- #endif -->
				</view>
				<view v-if="item.status > 2 && item.status < 6 && orderType !== 'subscribe'" class="h-box">
					<view class="flex-extend">
						<text v-if="item.deadline"
							class="uni-text-gray uni-text-small">截止时间：{{$formatTime(item.deadline)}}</text>
						<text v-if="item.chargeoffTime"
							class="uni-text-gray uni-text-small">核销时间：{{$formatTime(item.chargeoffTime)}}</text>
					</view>
					<view class="h-box justify-end">
						<text class="">{{item.items[0].count || '-'}}件商品共：</text>
						<text class="">￥{{(item.total_fee / 100) || '-'}}</text>
					</view>
				</view>
				<view v-if="isRefundStatus(item.status) && orderType !== 'subscribe' && item.refundApply" class="h-box justify-end">
					<text>退款数量：{{item.refundApply.count || '-'}}</text>
				</view>
				<view class="t-pad b-pad">
					<u-line color="#EAEAEA"></u-line>
				</view>
				<view class="uni-flex justify-between uni-common-mb text-small"
					v-if="item.status === 3 && orderType === 'subscribe' && item.renewalNoPay">
					<template v-if="item.type === 'subscribe'">
						<view class="purple">
							续时
							{{ formatTimeInterval(item.renewalData.endTime - item.renewalData.duration, item.renewalData.endTime )}}
						</view>
						<view class="pink">
							续时{{ item.renewalData.duration / oneHour }}小时需付：¥{{ renewalNeedPay(item.items[0], item.scriptInfo.playTime, item.renewalData.duration) || 0 }}
						</view>
					</template>
					<template v-if="item.type === 'tearoom'">
						<view class="purple">
							续时
							{{ formatTimeInterval(item.renewalData.endTime - item.renewalData.duration, item.renewalData.endTime )}}
						</view>
						<view class="pink">
							续时{{ item.renewalData.duration / oneHour }}小时需付：¥{{ teaRenewalNeedPay(item.roomInfo, item.renewalData.duration) || 0 }}
						</view>
					</template>
				</view>
				<view class="uni-flex justify-between">
					<view class="uni-text-gray">
						<text
							v-if="item.status === 3 && orderType === 'subscribe' && item.type === 'subscribe' && item.renewalNoPay">每人¥{{ perPrice(item.items[0].script_price, item.scriptInfo.playTime, item.items[0].room_price || item.items[0].unifyPrice) }}/小时</text>
						<text
							v-if="item.status === 3 && orderType === 'subscribe' && item.type === 'tearoom' && item.renewalNoPay">¥{{ teaRenewalNeedPay(item.roomInfo, item.renewalData.duration) || 0 }}/小时</text>
					</view>
					<view class="uni-flex justify-end btn-wrapper">
						<u-button v-if="orderType !== 'subscribe'" @click="navToDetail(index)" shape="circle"
							size="mini">详情</u-button>
						<u-button v-if="item.hasReceipts" @click="navToReceipt(index)" shape="circle" size="mini">查看套票
						</u-button>
						<u-button v-if="item.status === 1" @click="handleCancel(index)" shape="circle" size="mini">取消订单
						</u-button>
						<template v-if="item.status === 3">
							<!-- <u-button v-if="item.motorcadeInfo && item.motorcadeInfo.renewalOrders.length && item.motorcadeInfo.renewalOrders[0].notPaidInFull" @click="handleCancel(index)" shape="circle" size="mini">取消续时订单</u-button> -->
							<!-- <u-button v-if="item.renewalOrders.length && item.renewalOrders[0].notPaidInFull" @click="handleCancel(index)" shape="circle" size="mini">取消续时订单</u-button> -->
						</template>
						<template>
							<u-button v-if="item.status === 1 && orderType === 'goods'" @click="handlePay(index)"
								shape="circle" type="error" size="mini" :custom-style="nowPay">立即支付</u-button>
							<u-button v-if="item.status === 1 && orderType === 'subscribe'"
								@click="handlePay(index)" shape="circle" type="error" size="mini"
								:custom-style="nowPay">立即支付</u-button>
							<u-button v-if="item.status === 3 && item.renewalNoPay" @click="handlePay(index)"
								shape="circle" type="error" size="mini" :custom-style="nowPay">立即支付</u-button>
						</template>
						<template v-if="item.status === 4">
							<u-button v-if="orderType === 'goods'" @click="handleEvaluation(index)" shape="circle"
								size="mini">去评价</u-button>
							<u-button v-if="orderType === 'subscribe'" @click="recurOrder(index)" shape="circle"
								size="mini" :custom-style="recurOrderStyle">再来一单</u-button>
							<u-button v-if="orderType === 'subscribe'" @click="handleEvaluation(index)" shape="circle"
								size="mini" :custom-style="evaluateOrderStyle">评价订单</u-button>
						</template>
						<u-button v-if="item.groupId && item.status !== 13 && item.status !== 14"
							@click="navToGroupDetail(item)" type="error" shape="circle" size="mini">查看拼团</u-button>
						<u-button v-if="isRefundStatus(item.status)" @click="navToRefundProgress(index)" shape="circle"
							size="mini">退款进度</u-button>
						<template v-if="item.status === 3 && orderType === 'subscribe' && !item.renewalNoPay">
							<u-button
								v-if="item.motorcadeInfo && item.motorcadeInfo.renewalOrders.length && item.motorcadeInfo.renewalOrders[0].notPaidInFull"
								shape="circle" size="mini" disabled>等待车队其他订单支付</u-button>
							<u-button v-else @click="clickRenewalDate(index)" shape="circle" size="mini"
								:custom-style="renewalDateStyle">续时间</u-button>
						</template>
						<!-- <u-button v-if="item.status === 2 && orderType === 'subscribe'" @click="" shape="circle" size="mini">分享</u-button> -->
						<view v-if="item.status === 2 && orderType === 'subscribe'" @click.stop="clickShare(index)"
							shape="circle" class="h-box share-button">
							<image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_fenxiang_anniu@2x.png"
								style="width: 42rpx; height: 42rpx; margin-right: 6rpx;"></image>
							<text>分享</text>
						</view>
						<u-button
							v-if="item.status === 3 && orderType === 'subscribe' && item.roomInfo.cooperationMode !== 'school' && !item.renewalNoPay"
							@click="scanCode(index)" shape="circle" size="mini" :custom-style="openDoorStyle">扫码开门
						</u-button>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingStatus"></uni-load-more>
		</view>
		<view v-else style="margin-top: 30%;">
			<u-empty></u-empty>
		</view>
		<request-notify-wx ref="requestNotifyWx" :templates="templates"></request-notify-wx>

		<u-popup v-model="showRenewalDate" mode="bottom" border-radius="70" closeable height="750" class="renewal-win">
			<view class="pad-b-sm pad-t-sm">
				<view class="uni-bold uni-center text-lg">续时间</view>
				<template v-if="renewalDateList && renewalDateList.length > 0">
					<view class="u-select__body">
						<picker-view class="u-select__body__picker-view" indicator-class="select-box" :value="0"
							@pickstart="pay = false" @change="bindChange"
							v-if="renewalDateList && renewalDateList.length > 0">
							<picker-view-column>
								<view class="u-select__body__picker-view__item uni-center"
									v-for="(item, index) in renewalDateList" :key="index">
									<view :class="['u-line-1', index === selectIndex ? 'select-text' : '']">
										{{ item.label }}</view>
								</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="h-box v-fill pad-l-base pad-r-base pad-t-base">
						<view class="flex-v flex-extend"
							v-if="list && list[currentRenewalOrderIndex] && list[currentRenewalOrderIndex].type === 'tearoom'">
							<view>
								<text class="text-lg text-bold"
									style="color: #FF5673;">￥{{ (renewalPerPrice * renewalData.durationHour).toFixed(2) || 0 }}</text>
							</view>
							<text class="uni-text-gray text-sm">￥{{ renewalPerPrice || 0 }}/小时</text>
						</view>
						<view class="flex-v flex-extend" v-else>
							<view>
								<text class="text-lg text-bold"
									style="color: #FF5673;">￥{{ ((renewalMaleCount + renewalFemaleCount) * renewalPerPrice * renewalData.durationHour).toFixed(2) || 0 }}</text>
								<text
									class="uni-text-gray text-sm l-mg">续费{{ renewalMaleCount + renewalFemaleCount || 0 }}人</text>
							</view>
							<text class="uni-text-gray text-sm">每人￥{{ renewalPerPrice || 0 }}/小时</text>
						</view>
						<button @click="confirmPay" :class="['btn-buy', pay ? 'btn-is-buy' : '']">去支付</button>
					</view>
				</template>
				<z-loading v-else class="z-loading"></z-loading>
			</view>
		</u-popup>

		<!-- 分享 -->
		<u-mask :show="showShare" @click="showShare = false" :custom-style="{background: 'rgba(0, 0, 0, .7)'}">
			<view class="mask v-box">
				<share-script v-if="showShare" ref="poster" @completed="handlePosterCompleted"
					:motorcade-id="motorcadeId"></share-script>
				<view class="mask-brokerage">
					分享用户成功下单即可最少获得
					<text class="pink">{{ minBrokerage }}元</text>
					佣金
				</view>
				<view class="mask-footer h-box" @tap.stop>
					<view class="mask-footer-overlap pos-real">
						<button open-type="share" class="h-box justify-center pos-abs">分享好友</button>
						<image style="width: 300rpx; height: 68rpx; margin-right: 8rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/share@2x.png">
						</image>
					</view>
					<view class="mask-footer-overlap pos-real">
						<button @click="saveImage" class="h-box justify-center pos-abs">保存相册</button>
						<image style="width: 300rpx; height: 68rpx; margin-right: 8rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/save@2x.png">
						</image>
					</view>
				</view>
			</view>
		</u-mask>
		<!--  -->
		<u-modal v-model="modalOpenSetting" cancel-text="取消" :show-cancel-button="true" :show-title="false"
			content="请先打开保存到相册开关">
			<view slot="confirm-button" class="h-box justify-center v-fill">
				<u-button @click="modalOpenSetting = false" open-type="openSetting"
					:custom-style="{color: 'transparent'}" hover-class="none">
					<view class="text-dark">去设置</view>
				</u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from "vuex"

	import {
		goodsOrderStatusPlatform as goodsOrderStatus,
		subscribeOrderStatusPlatform as subscribeOrderStatus
	} from "../../common/constants.js"

	import {
		saveImage
	} from "@/common/maUtil.js"

	import {
		genPayInfo,
		cancelOrder,
		getMyBuyOrders,
		getOrderDetail,
		openDoor
	} from "../../api/platform/order.js"
	import {
		getUserInfo
	} from "@/api/platform/user.js"

	const db = uniCloud.database()
	const dbCmd = db.command
	const $ = dbCmd.aggregate

	export default {
		name: 'order-list-platform',
		data() {
			return {
				minBrokerage: 0,
				shareBrokerage: 0,
				motorcadeId: '',
				shareImgUrl: '',
				modalOpenSetting: false,
				showShare: false,

				currentRenewalOrderIndex: null,
				renewalData: {
					endTime: 0, // 续时订单结束时间
					duration: 0, // 续时时长
					durationHour: 0 // 续时多少个小时
				},

				showRenewalDate: false,
				renewalDateList: [],
				pay: true,
				renewalMaleCount: 0,
				renewalFemaleCount: 0,
				renewalPerPrice: 0,
				selectIndex: 0,
				physicalRoom: {
					gameroomId: '',
					tearoomId: ''
				},

				goodsOrderStatus,
				subscribeOrderStatus,
				list: [],
				pageNum: 0,
				pageSize: 10,
				total: 0,
				loadingStatus: 'noMore',
				templates: [{
					templateName: "拼团结果提醒",
					templateId: "yNidF1PvZYWTofax_BzEIDPBeGoxDBjOU7RQNBxHGeE"
				}],

				noLoad: false,
				oneHour: 3600000,
				orderToPay: null,

				recurOrderStyle: {
					height: "56rpx",
					lineHeight: "56rpx",
					padding: '0 30rpx',
					borderRadius: "35rpx",
					fontSize: "26rpx",
					color: "#FF5673",
					backgroundColor: "#FFFFFF",
					borderColor: "#FF5673"
				},
				evaluateOrderStyle: {
					height: "56rpx",
					lineHeight: "56rpx",
					padding: '0 30rpx',
					borderRadius: "35rpx",
					fontSize: "26rpx",
					color: "#999999",
					backgroundColor: "#FFFFFF",
					borderColor: "#999999"
				},
				openDoorStyle: {
					height: "56rpx",
					lineHeight: "56rpx",
					padding: '0 30rpx',
					borderRadius: "35rpx",
					fontSize: "26rpx",
					color: "#FFFFFF",
					backgroundColor: "#FF5673",
					borderColor: "#FF5673"
				},
				renewalDateStyle: {
					height: "56rpx",
					lineHeight: "56rpx",
					padding: '0 30rpx',
					borderRadius: "35rpx",
					fontSize: "26rpx",
					color: "#FFFFFF",
					backgroundColor: "#6667FF",
					borderColor: "#6667FF"
				},
				nowPay: {
					height: "56rpx",
					lineHeight: "56rpx",
					padding: '0 30rpx',
					borderRadius: "35rpx",
					fontSize: "26rpx",
					color: "#FFFFFF",
					backgroundColor: "#FF5673",
					borderColor: "#FF5673"
				},
				buttonCopy: {
					width: "100rpx",
					height: "40rpx",
					lineHeight: "40rpx",
					backgroundColor: "#EBEBEB",
					borderRadius: "20px",
					fontSize: "22rpx",
					textAlign: "center",
					padding: "0 15rpx",
					marginLeft: "10rpx"
				}
			};
		},
		props: {
			status: {
				type: Number,
				default: 0
			},
			orderType: {
				type: String,
				default: 'subscribe'
			}
		},
		computed: {
			...mapState(["userInfo"]),

			membersLength() {
				return item => '+' + (item.members.length - 2)
			},

			formatTimeInterval() {
				return (startTime = 0, endTime = 0) => {
					return this.$moment(startTime).format('M月D日 ') + this.$moment(startTime).format('HH:mm') + '-' +
						this.$moment(endTime).format('HH:mm')
				}
			},
			formatTimeIntervalStr() {
				return (startTime = 0, endTime = 0) => {
					return this.formatTimeInterval(startTime, endTime) + ' 共' + (endTime - startTime) / this.oneHour +
						'个小时'
				}
			},
			formatTimeHourStr() {
				return (fixedPart, endTime, i) => {
					return fixedPart + this.$moment(endTime).format('HH:mm') + ' 共' + i + '个小时'
				}
			},

			perPrice() {
				return (scriptPrice, scriptPlayTime, roomPrice) => {
					let scriptPricePerHour = (scriptPrice || 0) / (scriptPlayTime || 1)
					let t = scriptPricePerHour + (roomPrice || 0)
					return (t / 100).toFixed(2)
				}
			},
			renewalNeedPay() {
				return (item, scriptPlayTime, duration) => {
					let t = this.perPrice(item?.script_price || 0, scriptPlayTime, item?.room_price || item
						.unifyPrice) * (duration / this.oneHour) * (item?.count || 1)
					return t.toFixed(2)
				}
			},
			teaRenewalNeedPay() {
				return (roomInfo, duration) => {
					let t = ((roomInfo.price || roomInfo.unifyPrice || 0) / 100).toFixed(2) * (duration / this.oneHour)
					return t.toFixed(2)
				}
			},
		},
		watch: {
			showShare: function(newVal, oldVal) {
				if (newVal === false) {
					this.noLoad = false
				}
			}
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			...mapActions(['setShareManId']),

			recurOrder(index) {
				let order = this.list[index]
				if (order.type === 'subscribe') {
					uni.navigateTo({
						url: "/pagesSubscribe/script-order?scriptId=" + order.motorcadeInfo.scriptId
					})
				}
				if (order.type === 'tearoom') {
					let data = JSON.stringify({
						storeId: order.items[0].store_id,
						from: 'tearoom'
					})
					uni.navigateTo({
						url: '/pagesSubscribe/create-order?data=' + encodeURIComponent(data)
					})
				}
			},

			async saveImage() {
				if (!this.shareImgUrl) {
					uni.showToast({
						title: '图片路径不存在',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				try {
					await saveImage(this.shareImgUrl)
					uni.showModal({
						content: '图片保存成功',
						showCancel: false,
						confirmText: '知道了'
					})
					uni.hideLoading()
				} catch (e) {
					console.log("e: ", e);
					uni.hideLoading()
					if ('未授权' === e || e.errMsg.includes('auth deny') || e.errMsg.includes('auth denied')) {
						this.modalOpenSetting = true
						this.showShare = false
					} else if (e.errMsg.includes('cancel')) {
						// 取消保存
					} else {
						this.$showError(e)
					}
				}
			},
			handlePosterCompleted(path) {
				this.shareImgUrl = path
			},

			brokerage(order) {
				let scriptPrice = (order.scriptInfo.price || 0) / (order.scriptInfo.playTime || 1)
				let roomPrice = order.roomInfo.price || 0
				let duration = (order.motorcadeInfo.endTime - order.motorcadeInfo.startTime) / 3600000
				let foo = ((scriptPrice + roomPrice) / 100 * duration * order.shareBrokerage) || 0
				this.minBrokerage = foo.toFixed(2)
			},
			clickShare(index) {
				if (!this.list[index].motorcadeInfo?._id) return
				this.motorcadeId = this.list[index].motorcadeInfo._id
				this.noLoad = true
				this.showShare = true
				this.brokerage(this.list[index])
			},

			scanCode(index) {
				this.noLoad = true
				let that = this
				uni.scanCode({
					scanType: 'qrCode',
					success: function(res) {
						console.log('二维码内容：' + res.result);

						uni.navigateTo({
							url: `/pagesSubscribe/openDoorResult?q=${ encodeURIComponent(res.result) }`
						})
					},
					fail: function(e) {
						console.log(e)
						let text = e.errMsg.replace('scanCode:', '')
						if (text.includes('cancel')) return
						uni.showToast({
							title: text,
							icon: 'none'
						})
					},
					complete: function() {
						that.noLoad = false
					}
				});
			},

			confirmPay() {
				let currentRenewalOrder = this.list[this.currentRenewalOrderIndex]

				let data = {}

				if (currentRenewalOrder.type === 'tearoom') {
					data = {
						startTime: currentRenewalOrder.items[0].start_time,
						endTime: currentRenewalOrder.items[0].end_time,

						storeId: currentRenewalOrder.items[0].store_id,

						roomId: currentRenewalOrder.items[0].room_id,

						tearoomOrderId: currentRenewalOrder._id, // 当前茶室订单id

						renewalData: this.renewalData,
						renewalStartTime: (currentRenewalOrder?.renewalOrders && currentRenewalOrder.renewalOrders[0]
							?.renewalEndTime) || currentRenewalOrder.items[0].end_time, // 最新续时订单的结束时间 or 订单结束时间
						renewalOrders_inverted: currentRenewalOrder?.renewalOrders_inverted,

						type: 'renewal'
					}

					let dataStr = encodeURIComponent(JSON.stringify(data))
					this.showRenewalDate = false
					uni.navigateTo({
						url: `/pagesSubscribe/tea-payment?data=${dataStr}`
					})
				}

				if (currentRenewalOrder.type === 'subscribe') {
					data = {
						scriptId: currentRenewalOrder.scriptInfo._id,

						motorcadeId: currentRenewalOrder.motorcadeId,

						startTime: currentRenewalOrder.motorcadeInfo.startTime,
						endTime: currentRenewalOrder.motorcadeInfo.endTime,

						storeId: currentRenewalOrder.motorcadeInfo.storeId,

						roomId: currentRenewalOrder.roomInfo.roomId,

						maleCount: currentRenewalOrder.items[0].maleCount,
						femaleCount: currentRenewalOrder.items[0].femaleCount,

						allowGetOn: currentRenewalOrder.allowGetOn,

						orderId: currentRenewalOrder._id,

						renewalData: this.renewalData,
						renewalStartTime: currentRenewalOrder.motorcadeInfo.renewalOrders[0]?.renewalEndTime ||
							currentRenewalOrder.motorcadeInfo.endTime, // 最新续时订单的结束时间 or 车队结束时间
						renewalOrders_inverted: currentRenewalOrder.motorcadeInfo?.renewalOrders_inverted,

						type: 'renewal'
					}

					let dataStr = encodeURIComponent(JSON.stringify(data))
					this.showRenewalDate = false
					uni.navigateTo({
						url: `/pagesSubscribe/script-payment?data=${dataStr}`
					})
				}
			},
			bindChange(e, f) {
				this.selectIndex = e.detail?.value[0] || 0

				let item = f ? e : this.renewalDateList[e.detail.value[0]]
				this.renewalMaleCount = item?.renewalMaleCount || 0
				this.renewalFemaleCount = item?.renewalFemaleCount || 0
				this.renewalPerPrice = this.perPrice(item?.scriptPrice, item?.scriptPlayTime, item?.roomPrice)
				this.renewalData = {
					endTime: item.renewalEndTime,
					duration: item.duration,
					durationHour: item.durationHour
				}

				this.pay = true
			},
			async getPhysicalRoom(roomId) {
				let res = await this.$dbHelper.getById("t3ds-store-room", roomId, {
					showLoading: false,
					field: 'storeId, name_number'
				})
				let res1 = await this.$dbHelper.getList("t3ds-store-room", {
					showLoading: false,
					where: {
						storeId: res.storeId,
						name_number: res.name_number
					},
					field: '_id, type'
				})
				for (let item of res1) {
					switch (item.type) {
						case 'gameroom':
							this.physicalRoom.gameroomId = item._id
							break;
						case 'tearoom':
							this.physicalRoom.tearoomId = item._id
							break;
						default:
							break;
					}
				}
			},
			async clickRenewalDate(index) {
				uni.showLoading({
					mask: true
				})

				this.currentRenewalOrderIndex = index
				this.renewalDateList = []

				let currentData = this.list[index]

				if (currentData.roomInfo.cooperationMode !== 'school') {
					await this.getPhysicalRoom(currentData.roomInfo.roomId)
				}

				let currentEndTime = 0
				switch (currentData.type) {
					case 'subscribe': // 剧本杀订单
						currentEndTime = currentData.motorcadeInfo.endTime
						break;
					case 'tearoom': // 茶室订单
						currentEndTime = (currentData?.renewalOrders && currentData.renewalOrders[0]
							?.renewalEndTime) || currentData.items[0].end_time
						break;
					case 'renewal':
						if (currentData.motorcadeInfo?._id) { // 剧本杀续时订单
							currentEndTime = currentData.motorcadeInfo.endTime
						} else { // 茶室续时订单
							currentEndTime = currentData.items[0].end_time
						}
						default:
							break;
				}

				let res1 = await db.collection('t3ds-subscribe-motorcade')
					.aggregate()
					.match({
						roomId: this.physicalRoom.gameroomId,
						status: dbCmd.in([1, 2, 3, 4, -2]),
						startTime: dbCmd.gte(currentEndTime + 1800000) // 30min
					})
					.sort({
						startTime: 1
					})
					.limit(1)
					.project({
						startTime: 1
					})
					.end()
				let res2 = await db.collection('t3ds-order')
					.aggregate()
					.match({
						status: dbCmd.eq(3),
						['items.' + 0 + '.room_id']: this.physicalRoom.tearoomId,
						['items.' + 0 + '.start_time']: dbCmd.gte(currentEndTime + 1800000) // 30min
					})
					.sort({
						['items.' + 0 + '.start_time']: 1
					})
					.limit(1)
					.project({
						['items.start_time']: 1
					})
					.end()
				let foo1 = res1.result.data[0]?.startTime || this.$moment(currentEndTime).hour(0).minute(0).second(0)
					.toDate().getTime() + 86400000
				let foo2 = res2.result?.data[0]?.items[0]?.start_time || this.$moment(currentEndTime).hour(0).minute(0)
					.second(0).toDate().getTime() + 86400000
				if (foo1 > foo2) {
					foo1 = foo2
				}

				uni.hideLoading()
				let idleDate = Math.floor((foo1 - currentEndTime) / 60 / 60) / 1000
				if (idleDate < 1) {
					uni.showToast({
						title: "能续时间小于1小时，无法续时",
						icon: "none"
					})
					return
				}

				this.showRenewalDate = true

				let fixedPart = this.$moment(currentEndTime).format('M月D日 ') + this.$moment(currentEndTime).format(
					'HH:mm') + '-'

				let list = []
				for (let i = 1; i <= idleDate; i += 0.5) {
					let renewalEndTime = currentEndTime + i * this.oneHour
					let data = {}
					switch (currentData.type) {
						case 'subscribe': // 剧本杀订单
							data = {
								label: this.formatTimeHourStr(fixedPart, renewalEndTime, i),
								renewalMaleCount: currentData.items[0].maleCount,
								renewalFemaleCount: currentData.items[0].femaleCount,
								scriptPrice: currentData.scriptInfo.price,
								scriptPlayTime: currentData.scriptInfo.playTime,
								roomPrice: currentData.roomInfo.price,
								renewalEndTime: renewalEndTime,
								duration: i * this.oneHour,
								durationHour: i
							}
							break;
						case 'tearoom': // 茶室订单
							data = {
								label: this.formatTimeHourStr(fixedPart, renewalEndTime, i),
								roomPrice: currentData.items[0].room_price,
								renewalEndTime: renewalEndTime,
								duration: i * this.oneHour,
								durationHour: i
							}
							break;
						case 'renewal':
							if (currentData.motorcadeInfo?._id) { // 剧本杀续时订单
								data = {
									label: this.formatTimeHourStr(fixedPart, renewalEndTime, i),
									renewalMaleCount: currentData.items[0].maleCount,
									renewalFemaleCount: currentData.items[0].femaleCount,
									scriptPrice: currentData.scriptInfo.price,
									scriptPlayTime: currentData.scriptInfo.playTime,
									roomPrice: currentData.roomInfo.price,
									renewalEndTime: renewalEndTime,
									duration: i * this.oneHour,
									durationHour: i
								}
							} else { // 茶室续时订单
								data = {
									label: this.formatTimeHourStr(fixedPart, renewalEndTime, i),
									roomPrice: currentData.items[0].room_price,
									renewalEndTime: renewalEndTime,
									duration: i * this.oneHour,
									durationHour: i
								}
							}
							default:
								break;
					}
					list.push(data)
				}

				this.renewalDateList = list
				this.$forceUpdate()
				this.bindChange(this.renewalDateList[0], 1)
			},

			navToReceipt(index) {
				uni.navigateTo({
					url: "/pagesGroup/platform/receipt-list2?orderId=" + this.list[index]._id
				})
			},
			isRefundStatus(status) {
				return [6, 7, 8, 10].indexOf(status) >= 0
			},
			navToRefundProgress(index) {
				uni.navigateTo({
					url: "/pagesGroup/platform/refund-progress?applyId=" + this.list[index].refundApply._id
				})
			},
			handleEvaluation(index) {
				uni.navigateTo({
					url: "../../pagesUser/platform/goods-evaluation-form?orderId=" + this.list[index]._id,
					events: {
						saved: () => {
							this.$emit('change')
						}
					}
				})
			},
			navToDetail(index) {
				let item = this.list[index]
				switch (item.type) {
					case 'goods':
						uni.navigateTo({
							url: "/pagesGroup/platform/order-detail?orderId=" + item._id
						})
						break;
					case 'subscribe':
						uni.navigateTo({
							url: "../../pagesSubscribe/script-order-detail?orderId=" + item._id
						})
						break;
					case 'tearoom':
						uni.navigateTo({
							url: "../../pagesSubscribe/tea-order-detail?orderId=" + item._id
						})
						break;
					default:
						break;
				}
			},
			navToGroupDetail(item) {
				uni.navigateTo({
					url: `/pagesGroup/group-detail?groupId=${item.groupId}&groupMemberId=${item.groupMemberId}`
				})
			},
			handleCopy(item, index) {
				let value = ''
				if (item === 'subscribe') {
					value = this.list[index]._id
				} else {
					value = item._id
				}
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.showToast({
							title: "已复制",
							icon: "none"
						})
					}
				});
			},
			handleCancel(index) {
				if (this.busy) {
					return;
				}
				this.busy = true;
				uni.showModal({
					title: "提示",
					content: "确定取消吗",
					cancelText: "点错了",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.cancelOrder(this.list[index]);
						} else {
							this.busy = false;
						}
					}
				})
			},
			async cancelOrder(order) {
				let orderId = order._id
				console.log("order: ", order);
				// 取消续时订单-不做处理
				// if (order.status === 3) {
				//   // 取消剧本杀续时订单
				//   if (order.motorcadeInfo && order.motorcadeInfo.renewalOrders.length && order.motorcadeInfo.renewalOrders[0].notPaidInFull) {
				//     orderId = order.motorcadeInfo.renewalOrders[0].renewalOrdersId.map(item => item.renewalOrderId)
				//   }
				//   // 取消茶室续时订单
				//   if (order.renewalOrders?.length && order.renewalOrders[0].notPaidInFull) {
				//     orderId = order.renewalOrders[0].renewalOrderId
				//   }
				// }
				try {
					await cancelOrder({
						orderId
					})
					// if (order.status === 1) {
					order.status = -1;
					// } else {
					//   order.renewalOrders[0].notPaidInFull = false
					//   this.reload()
					// }
				} catch (e) {
					this.$log("取消订单遇到错误", e);
				} finally {
					this.busy = false;
				}
			},
			async handlePay(index) {
				uni.showLoading({
					mask: true
				})
				try {
					this.orderToPay = this.list[index]
					if (this.orderToPay.payment_fee <= 0) {
						this.finishPay()
						return;
					}
					//#ifdef MP-WEIXIN
					if (this.orderToPay.groupId) {
						await this.$refs.requestNotifyWx.request(false);
					}
					//#endif
					let orderPayInfo = await genPayInfo({
						orderId: this.orderToPay._id,
						provider: "wxpay"
					});
					uni.showLoading({
						mask: true,
						title: '检测支付环境'
					})
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: orderPayInfo.timeStamp,
						nonceStr: orderPayInfo.nonceStr,
						package: orderPayInfo.package,
						signType: orderPayInfo.signType,
						paySign: orderPayInfo.paySign,
						success: (res) => {
							this.$log('支付成功。' + JSON.stringify(res))
							uni.hideLoading()
							if (this.orderToPay.type == 'subscribe') {
								uni.navigateTo({
									url: `/pagesSubscribe/script-order-detail?orderId=${ this.orderToPay._id }`
								})
							} else if (this.orderToPay.type == 'goods') {
								uni.navigateTo({
									url: "/pagesGroup/platform/order-detail?orderId=" + this
										.orderToPay._id
								})
							}
							
						},
						fail: (err) => {
							console.log('err', err)
							uni.hideLoading()
							// this.handlePayFailed("确定放弃支付吗？");
							if (/cancel/i.test(err.errMsg)) {
								this.$toast('取消支付')
							} else {
								this.$toast(err.errMsg)
							}
						}
					})
				} catch (e) {
					this.$log("支付遇到错误", e);
					uni.hideLoading()
				}
			},
			// handleRenewalPay(index) {
			// 	let currentData = this.list[index]

			// 	if (currentData.type === 'tearoom') {
			// 		let data = { // 支付茶室预约订单
			// 			startTime: currentData.items[0].start_time,
			// 			endTime: currentData.items[0].end_time,

			// 			storeId: currentData.items[0].store_id,

			// 			roomId: currentData.items[0].room_id,

			// 			tearoomOrderId: currentData._id, // 当前茶室订单id

			// 			type: 'tearoom'
			// 		}
			// 		if (currentData.status === 3) { // 支付茶室续时订单
			// 			data.type = 'renewal'
			// 			data.renewalData = currentData.renewalData
			// 			data.renewalStartTime = currentData.items[0].end_time // 订单结束时间
			// 			data.renewalOrders_inverted = currentData?.renewalOrders_inverted
			// 		}

			// 		let dataStr = encodeURIComponent(JSON.stringify(data))
			// 		this.showRenewalDate = false
			// 		uni.navigateTo({
			// 			url: `/pagesSubscribe/tea-payment?data=${dataStr}`
			// 		})
			// 	}

			// 	if (currentData.type === 'subscribe') {
			// 		let currentEndTime = currentData.motorcadeInfo?.endTime || currentData.items[0].end_time
			// 		let fixedPart = this.$moment(currentEndTime).format('M月D日 ') + this.$moment(currentEndTime).format(
			// 			'HH:mm') + '-'

			// 		let data = {
			// 			scriptId: currentData.scriptInfo._id,

			// 			motorcadeId: currentData.motorcadeId,

			// 			startTime: currentData.motorcadeInfo?.startTime || currentData.items[0].start_time,
			// 			endTime: currentData.motorcadeInfo?.endTime || currentData.items[0].end_time,

			// 			storeId: currentData.motorcadeInfo?.storeId || currentData.roomInfo.storeId,

			// 			roomId: currentData.roomInfo.roomId,

			// 			maleCount: currentData.items[0].maleCount || 0,
			// 			femaleCount: currentData.items[0].femaleCount || 0,

			// 			allowGetOn: currentData.allowGetOn,

			// 			orderId: currentData._id, // 当前剧本杀订单id

			// 			type: 'subscribe'
			// 		}
			// 		if (currentData.status === 3) { // 支付剧本杀续时订单
			// 			data.type = 'renewal'
			// 			data.orderId = currentData.renewalData.renewalOrderId
			// 			data.renewalData = currentData.renewalData
			// 			data.renewalOrders_inverted = currentData.motorcadeInfo.renewalOrders_inverted
			// 			data.renewalStartTime = currentData.renewalData?.status === 1 ? currentData.motorcadeInfo.endTime -
			// 				currentData.renewalData.duration : currentData.motorcadeInfo.endTime // 车队结束时间
			// 		}
			// 		let dataStr = encodeURIComponent(JSON.stringify(data))
			// 		this.showRenewalDate = false
			// 		uni.navigateTo({
			// 			url: `/pagesSubscribe/script-payment?data=${dataStr}`
			// 		})
			// 	}
			// },
			showFaildModal() {
				uni.showModal({
					title: "手速过慢，拼团已经结束了",
					showCancel: false,
					success: (res) => {
						this.reload();
					}
				})
			},
			async finishPay() {
				if (!this.orderToPay) {
					return;
				}
				try {
					this.orderToPay = await getOrderDetail({
						id: this.orderToPay._id
					})
					let currentRegion = uni.getStorageSync('currentRegion')
					let currentCityCode = currentRegion.city.value
					let userInfo = await getUserInfo({}, currentCityCode)
					this.updateUserInfo(userInfo)
					if (this.orderToPay.status === 5 || this.orderToPay.status === 6 || this.orderToPay.status === 7) {
						//付款速度慢了，拼团已结束
						this.showFaildModal();
					} else if (this.orderToPay.status === 1) {
						this.handlePayFailed("支付没有成功，是否重新支付？");
					} else {
						this.setShareManId(null);
						if (this.orderToPay.groupId) {
							this.navToGroupDetail(this.orderToPay);
						} else {
							uni.navigateTo({
								url: "/pagesGroup/platform/order-detail?orderId=" + this.orderToPay._id
							})
						}
					}
				} catch (e) {
					this.$log("error", e);
					this.askRetryPay();
				}
			},
			askRetryPay() {
				uni.showModal({
					title: "查询支付状态遇到错误，是否重试？",
					cancelText: "稍后查看",
					confirmText: "重试",
					success: (res) => {
						if (res.confirm) {
							this.finishPay();
						}
					}
				})
			},
			handlePayFailed(msg) {
				uni.showModal({
					title: msg,
					cancelText: "放弃",
					confirmText: "重新支付",
					success: (res) => {
						if (res.confirm) {
							this.handlePay();
						}
					}
				})
			},
			async hasGrouping(groupId) {
				try {
					let groupMember = await this.$http.getGroupMember(groupId);
					if (groupMember) {
						uni.showModal({
							title: "您正在参与此拼团",
							cancelText: "朕知道了",
							confirmText: "去查看",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: `/pagesGroup/group-detail?&groupId=${groupId}&groupMemberId=${groupMember.id}`
									})
								}
							}
						})
						return true;
					}
					return false;
				} catch (e) {
					this.$log("error", e);
					throw e
				}
			},
			async reload() {
				if (this.noLoad) return
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "more";
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try {
					let query = {
						orderType: this.orderType, // 查询预约订单时一同查询茶室订单
						pageNum: this.pageNum + 1,
						pageSize: this.pageSize
					}
					if (this.status) {
						query.status = this.status
					}
					let res = await getMyBuyOrders(query)
					if (query.pageNum === 1) {
						this.total = res.total
					}
					if (res.list.length) {
						res.list.forEach((item) => {
							let date = new Date();
							date.setTime(item.create_time);
							item.create_time = date.format("yyyy-MM-dd hh:mm:ss");
						})
						this.pageNum += 1;

						// 当前共享订单是否有未支付的续时订单 
						if (this.orderType === 'subscribe') {
							res.list.forEach(item => {
								item.renewalNoPay = (!item.renewalData || item.renewalData.status !== 1) ?
									false : true
							})
						}
						this.list = this.list.concat(res.list);
					}
					if (this.list.length < this.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				} catch (e) {
					this.$log("加载优惠平台订单列表遇到错误", e);
					this.loadingStatus = prevStatus;
				}
				console.log("list: ", this.list);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pink {
		color: #FF5673;
	}

	.renewal-win {
		/deep/ .z-loading {
			position: relative;

			view {
				position: absolute;
				left: 50%;
				transform: translate(-50%, 250%);
			}
		}

		/deep/ .u-select__body {
			.u-select__body__picker-view {
				height: 480rpx;
			}

			.select-box {
				height: 100rpx !important;
			}

			.u-select__body__picker-view__item {
				height: 100rpx !important;

				view {
					line-height: 100rpx !important;
				}

				.select-text {
					font-size: 32rpx;
					color: #6B6CFF;
				}
			}
		}

		.btn-buy {
			width: 345rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 49rpx;
			color: #cecece;
			margin: 0;
		}

		.btn-is-buy {
			background: #FF5673;
			color: #FFFFFF;
		}
	}

	.pink {
		color: #FF5673;
	}

	.purple {
		color: #6C6DFF;
	}
	
	.goods-img {
		width: 190rpx;
		height: 130rpx;
		margin-right: 20rpx;
	}

	.order-item {
		background-color: #FFFFFF;

		.icon-time {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		.order-img {
			width: 140rpx;
			height: 140rpx;
			background-color: #ececec;
			border-radius: 20rpx;
			margin-right: 20rpx;
			position: relative;

			.leftImg {
				display: inline-block;
				width: 30rpx;
				position: absolute;
				left: 0;
				z-index: 2;

				.hint {
					position: absolute;
					top: 50%;
					transform: translateY(-50%) scale(.6);

					width: 30rpx;
					height: 140rpx;
					line-height: 1.3;
					display: flex;
					flex-direction: column;

					color: #fff;
					overflow: hidden;
				}
			}

			.rightImg {
				display: inline-block;
				width: 112rpx;
				position: absolute;
				right: 0;

				.reco {
					position: absolute;
					top: -6rpx;
					right: 20rpx;

					.text {
						color: #fff;
						transform: scale(.6);
						text-align: center;
						position: absolute;
						z-index: 2;
						top: -22rpx;
					}
				}
			}
		}

		.order-text {
			width: 410rpx;

			view {
				line-height: 1.7;
			}
		}

		.order-num {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			padding: 34rpx 0 22rpx 0;

			view:first-child {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.order-num-copy {
				width: 42rpx;
				font-size: 21rpx;
				color: #6667FF;
				margin-left: 20rpx;
				white-space: nowrap;
			}
		}

		.order-avatar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.order-avatar-member {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.order-avatar-member-item {
					font-size: 0;
					margin-right: -20rpx;

					.avatar {
						border: 1px solid #ffffff;
					}

					/deep/ .u-line-1 {
						font-size: 20rpx !important;
						color: #fff !important;
					}
				}

				.order-avatar-member-item:last-child {
					margin-right: 0;
				}
			}

			.order-avatar-paid {
				// position: absolute;
				// right: 0;
				// width: 105rpx;
				// height: 46rpx;
				// line-height: 46rpx;
				// background: #FF5673;
				// box-shadow: 0px 1px 10rpx 0px rgba(106, 0, 0, 0.3);
				// border-radius: 23rpx;
				// border: 2px solid #FFFFFF;
				// text-align: center;
				// color: #fff;
				// box-sizing: content-box;
			}
		}
	}

	.order-item:not(:last-child) {
		margin-bottom: 20rpx;
	}

	/deep/ .btn-wrapper {
		margin-right: -10rpx !important;
	}

	/deep/ .btn-wrapper button {
		margin: 0 10rpx 0 0 !important;
	}

	.text-small {
		view {
			font-size: 24rpx !important;
		}
	}

	.share-button {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 30rpx;
		border-radius: 35rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #FF5673;
		border-color: #FF5673;
	}

	.mask {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.mask-brokerage {
			width: 630rpx;
			color: white;
			padding: 8rpx 16rpx;
			margin-top: 30rpx;
			border: 1px solid white;
			border-radius: 16rpx;
			text-align-last: justify;
			text-align: justify;
		}

		.mask-footer {
			position: absolute;
			bottom: 0;
			width: 750rpx;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0 0 40rpx 8rpx rgba(255, 255, 255, 0.3);
			justify-content: space-evenly;

			.mask-footer-overlap {
				button {
					width: 300rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 34rpx;
					color: #FFFFFF;
					opacity: 0;
				}
			}
		}
	}
</style>
